// 仪表盘组件
const Dashboard = {
    template: `
        <div>
            <h2 class="page-title">仪表盘</h2>
            
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="dashboard-card" shadow="hover" v-loading="loading">
                        <div slot="header">
                            <i class="fas fa-sitemap"></i> 路由
                        </div>
                        <div class="dashboard-card-content">
                            <div class="dashboard-card-value">{{ stats.routes }}</div>
                            <router-link to="/routes/list" class="dashboard-card-link">查看详情</router-link>
                        </div>
                    </el-card>
                </el-col>
                
                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="dashboard-card" shadow="hover" v-loading="loading">
                        <div slot="header">
                            <i class="fas fa-users"></i> 消费者
                        </div>
                        <div class="dashboard-card-content">
                            <div class="dashboard-card-value">{{ stats.consumers }}</div>
                            <router-link to="/consumers/list" class="dashboard-card-link">查看详情</router-link>
                        </div>
                    </el-card>
                </el-col>
                
                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="dashboard-card" shadow="hover" v-loading="loading">
                        <div slot="header">
                            <i class="fas fa-server"></i> 上游
                        </div>
                        <div class="dashboard-card-content">
                            <div class="dashboard-card-value">{{ stats.upstreams }}</div>
                            <router-link to="/upstreams/list" class="dashboard-card-link">查看详情</router-link>
                        </div>
                    </el-card>
                </el-col>
                
                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="dashboard-card" shadow="hover" v-loading="loading">
                        <div slot="header">
                            <i class="fas fa-cogs"></i> 服务
                        </div>
                        <div class="dashboard-card-content">
                            <div class="dashboard-card-value">{{ stats.services }}</div>
                            <router-link to="/services/list" class="dashboard-card-link">查看详情</router-link>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24">
                    <el-card class="dashboard-card" shadow="hover">
                        <div slot="header">
                            <span>系统信息</span>
                        </div>
                        <el-descriptions :column="2" border>
                            <el-descriptions-item label="系统名称">APISIX 管理控制台</el-descriptions-item>
                            <el-descriptions-item label="版本">1.0.0</el-descriptions-item>
                            <el-descriptions-item label="运行环境">Spring Boot</el-descriptions-item>
                            <el-descriptions-item label="数据库">MySQL</el-descriptions-item>
                            <el-descriptions-item label="APISIX 版本">2.15.0</el-descriptions-item>
                            <el-descriptions-item label="状态">
                                <el-tag size="small" type="success">运行中</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-col>
            </el-row>
            
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24">
                    <el-card class="dashboard-card" shadow="hover">
                        <div slot="header">
                            <span>快速操作</span>
                        </div>
                        <div class="quick-actions">
                            <router-link to="/consumers/create">
                                <el-button type="primary" icon="el-icon-plus">创建消费者</el-button>
                            </router-link>
                            <router-link to="/routes/create">
                                <el-button type="success" icon="el-icon-plus">创建路由</el-button>
                            </router-link>
                            <router-link to="/upstreams/create">
                                <el-button type="info" icon="el-icon-plus">创建上游</el-button>
                            </router-link>
                            <router-link to="/services/create">
                                <el-button type="danger" icon="el-icon-plus">创建服务</el-button>
                            </router-link>
                            <router-link to="/token">
                                <el-button type="warning" icon="el-icon-key">获取令牌</el-button>
                            </router-link>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            
            <el-row :gutter="20" style="margin-top: 20px;">
                <el-col :span="24">
                    <el-card class="dashboard-card" shadow="hover">
                        <div slot="header">
                            <span>数据同步</span>
                            <el-button 
                                style="float: right; padding: 3px 0" 
                                type="text"
                                @click="syncAllData"
                                :loading="syncing">
                                <i class="el-icon-refresh"></i> 从APISIX同步数据
                            </el-button>
                        </div>
                        <p>通过点击同步按钮，可以将APISIX中的路由、上游、服务和消费者数据同步到本地数据库。</p>
                        <div v-if="syncMessage" :class="{'sync-success': syncSuccess, 'sync-error': !syncSuccess}">
                            {{ syncMessage }}
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    `,
    data() {
        return {
            stats: {
                routes: 0,
                consumers: 0,
                upstreams: 0,
                services: 0
            },
            loading: true,
            syncing: false,
            syncMessage: '',
            syncSuccess: false
        };
    },
    created() {
        this.fetchStats();
    },
    methods: {
        fetchStats() {
            this.loading = true;
            
            // 获取路由数量
            axios.get('/routes')
                .then(response => {
                    this.stats.routes = response.data.length;
                })
                .catch(() => {
                    this.stats.routes = '-';
                });
            
            // 获取消费者数量
            axios.get('/consumers')
                .then(response => {
                    this.stats.consumers = response.data.length;
                })
                .catch(() => {
                    this.stats.consumers = '-';
                });
            
            // 获取上游数量
            axios.get('/upstreams')
                .then(response => {
                    this.stats.upstreams = response.data.length;
                })
                .catch(() => {
                    this.stats.upstreams = '-';
                });
            
            // 获取服务数量
            axios.get('/services')
                .then(response => {
                    this.stats.services = response.data.length;
                })
                .catch(() => {
                    this.stats.services = '-';
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        
        syncAllData() {
            this.syncing = true;
            this.syncMessage = '';
            
            // 同步路由数据
            const syncRoutes = axios.post('/routes/sync');
            
            // 同步上游数据
            const syncUpstreams = axios.post('/upstreams/sync');
            
            // 同步服务数据
            const syncServices = axios.post('/services/sync');
            
            // 等待所有同步完成
            Promise.all([syncRoutes, syncUpstreams, syncServices])
                .then(() => {
                    this.syncSuccess = true;
                    this.syncMessage = '数据同步成功！';
                    // 重新获取统计数据
                    this.fetchStats();
                })
                .catch(error => {
                    this.syncSuccess = false;
                    this.syncMessage = '数据同步失败: ' + (error.response?.data?.error || error.message);
                })
                .finally(() => {
                    this.syncing = false;
                });
        }
    }
}; 